<template>
    <!-- 忘记密码修改组件 2个接口 -->
    <el-dialog v-model="forgerPassword" title="忘记密码-邮箱找回" width="30%" draggable   destroy-on-close>
        <el-form :model="formData" label-position="top" :rules="rules">
            <el-form-item prop="account" label="账号" :label-width="formLabelWidth">
                <el-input v-model="formData.account" />
            </el-form-item>
            <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="formData.email" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="forgerPassword = false">关闭</el-button>
                <el-button type="primary" @click="openChangePass">
                    确认-下一步
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog v-model="changePassword" title="修改密码" width="30%" draggable>
        <el-form :model="formData" label-position="top" :rules="rules">
            <el-form-item prop="password" label="输入密码" :label-width="formLabelWidth">
                <el-input v-model="formData.password" />
            </el-form-item>
            <el-form-item prop="newPassword" label="再次输入密码" :label-width="formLabelWidth">
                <el-input v-model="formData.newPassword" show-password/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="changePassword = false">关闭</el-button>
                <el-button type="primary" @click="resetPassword">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { verify, resetPass } from '@/api/login.js'
const formLabelWidth = '140px'
//显示dialog
const forgerPassword = ref(false)
const openDiaLog = () => {
    forgerPassword.value = true
}
//改密码组件
const changePassword = ref(false)
//打开修改密码
//验证账号，邮箱
const openChangePass = async () => {
    const res = await verify(formData)
    console.log(res);
    if (res.status == 0) {
        ElMessage({
            message: '验证成功',
            type: 'success'
        })
        //成功开始下一步
        changePassword.value = true
        forgerPassword.value = false
        localStorage.setItem('id',res.id)
    } else {
        ElMessage({
            message: '验证失败',
            type: 'error'
        })
    }

}
//修改新密码
const resetPassword = async () => {
    if(formData.password==formData.newPassword){
        const newPassword= formData.newPassword
        const res = await resetPass(localStorage.getItem('id'), newPassword)
            if (res.status == 0) {
            ElMessage({
                showClose: true,
                message: '修改密码成功',
                type: 'success',
            })
            changePassword.value=false
        } else {
            ElMessage({
                message: '修改密码失败',
                type: 'error'
            })
        }
    }
    



}
//表单数据
interface formType {
    account: number
    email: string
    password: string
    newPassword: string
}
const formData: formType = reactive({
    account: null,
    email: '',
    password: '',
    newPassword: ''

})

//导出方法
defineExpose({
    openDiaLog
})
const rules = reactive<FormRules<formType>>({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 6, max: 12, message: '账号长度应该是 6 到12位', trigger: 'blur' },
    ],
    email: [
        {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ],
    newPassword: [
        {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur',
        },
    ],
})

</script>
<style scoped lang="scss">
:deep(.el-form-item__label) {
    padding: 0;
    justify-content: center
}
</style>